<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      append-to-body
      title="编辑代理用户"
  >
    <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">
      <el-form-item prop="title" label="代理用户">
        <el-select v-model="form.agentUserAccount"
                   filterable
                   remote
                   reserve-keyword
                   :remote-method="queryAccounts"
                   placeholder="请输入"
                   size= "small"
                   :loading="userAccountSelect.loading">
          <el-option
              v-for="item in userAccountSelect.options"
              :key="item.userAccount"
              :label="item.username"
              :value="item.userAccount">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="content" label="代理时间">
        <el-date-picker
            v-model="form.agentTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="content" label="代理理由">
        <el-input size= "small" type="textarea"  v-model="form.reason"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import {formatDate} from "@/utils/DateUtils";
import {addAgentVo} from '@/api/userAgent'
import {queryUserList} from '@/api/user'

export default {
  components:{
  },
  data(){
    return {
      labelPosition:'right',
      dialogVisible: false,
      loading: false,
      form: {
        agentUserAccount:"",
        agentStartTime:"",
        agentEndTime:"",
        reason:"",
        agentTime:"",
      },
      userAccountSelect:{
        options:[],
        loading:false

      },
    }
  },
  created(){

  },
  methods:{
    timeChange(value){
      debugger
    },
    async queryAccounts(query){
      if (query !== '') {
        this.userAccountSelect.loading = true;
        let res = await queryUserList({key:query});
        this.userAccountSelect.options = res.data;
        this.userAccountSelect.loading = false;
      } else {
        this.userAccountSelect.options = [];
      }
    },
    showDialog(row){
      this.dialogVisible = true
      this.form = row;
      // 改为下面的代码就不会出现上述问题
      this.$set(this.form, 'agentTime', [this.form.agentStartTime,this.form.agentEndTime])
      this.userAccountSelect.options = [];
      if(row.agentUserName !== ''){
        this.userAccountSelect.options = [{userAccount:row.agentUserAccount,username:row.agentUserName}];
      }
    },
    closeDialog(){
      this.form = {
        agentUserAccount:"",
        agentStartTime:"",
        agentEndTime:"",
        reason:""
      };
      this.dialogVisible = false
      this.loading = false
    },
    selectRoleBack(roleCode){
      this.form.roleCode = roleCode;
    },
    submit(){
      this.$refs.form.validate(async valid => {
        if(valid){
          try{
            this.loading = true
            if(this.form.agentTime == null || this.form.agentTime.length === 0){
              this.$message.error('请选择代理时间')
              return;
            }
            this.form.agentStartTime = this.form.agentTime[0];
            this.form.agentEndTime = this.form.agentTime[1];
            let res = await addAgentVo(this.form);
            if(res.status === '200'){
              this.$message.success('添加成功')
              this.closeDialog()
              this.$emit('success')
            }else{
              this.$message.error(res.msg)
              this.loading = false
            }
          }catch{
            this.loading = false
          }
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>